<template>
  <div class="goshopping">
    <div class="context-top">
      <span v-iconfont01 class="iconfont icon-zuojiantou" @click="fun1()"></span
      ><span>我的得物APP购物车</span>
    </div>
    <div class="flex1">
      <nav class="centent-nav">
      <div>
        <span class="iconfont icon-dewu"></span> 先鉴别后发货 · 全新正品
      </div>
      <div><span></span> 多重鉴别 · 全新正品</div>
    </nav>
    <nav class="centent-nav2">
      <van-notice-bar
        style="background: rgba(243, 241, 241, 0.623); color: rgb(80, 79, 79)"
        left-icon="volume-o"
        text="揭秘线下鉴别全流程"
      />
    </nav>
    <div class="centent">
      <div class="centent-centent1">
        <span>
          <img src="img/Recommend/dewu01.jpg" alt="" />
        </span>
        <span>
          <nav>AJ1 Mid SE 'DIAMONDAUSDJ'</nav>
          <nav><span>42码</span> 数量 x1</nav>
          <nav>
            <p>包邮</p>
          </nav>
        </span>
        <span> ￥1219
           </span>
          <span>
<van-checkbox></van-checkbox>
          </span>
        
      </div>



    </div>
    </div>
       <van-submit-bar  :price="1219" button-text="提交订单" @submit="onSubmit" >
  <template #tip>
    你的收货地址不支持同城送, <span @click="onClickEditAddress">修改地址</span>
  </template>
</van-submit-bar>
    <div>
      <Footer />
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { NoticeBar } from "vant";
import { Checkbox, CheckboxGroup } from 'vant';
import { SubmitBar } from 'vant';

Vue.use(SubmitBar);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(NoticeBar);
export default {
    data() {
    return {
    };
  },
  methods: {
    fun1() {
      this.$router.go(-1);
    },
    
  },
  directives: {
    //自定义指令
    iconfont01: {
      //名字
      inserted(el) {
        el.style.color = "rgb(94, 92, 92,0.4)";
      },
    },
  },
};
</script>

<style scoped>
.van-submit-bar{
  margin-bottom: .6rem;
}
.van-submit-bar__price{
  font-size: .14rem;
}
.flex1{
  flex: 1;
}

.centent-centent1 {
  width: 90%;
  margin: auto;
  min-height: 1rem;
  display: flex;
  margin-top: 0.5rem;
  border-bottom: 0.01rem solid rgb(194, 181, 181);
}
.centent-centent1 span:nth-child(1) {
  height: 0.8rem;
  width: 1.1rem;
}
.centent-centent1 span:nth-child(1) img {
  width: 100%;
  height: 100%;
  border: 0.01rem solid rgb(133, 131, 131);
}
.centent-centent1 span:nth-child(2) {
  width: 60%;
  height: 100%;
  padding-right: 0.1rem;
  padding-left: 0.1rem;
}
.centent-centent1 span:nth-child(2) nav:nth-child(1) {
  font-size: 0.12rem;
  line-height: 0.2rem;
}

.centent-centent1 span:nth-child(2) nav:nth-child(2) {
  color: rgb(202, 198, 198);
  line-height: 0.3rem;
  font-size: 0.1rem;
}
.centent-centent1 span:nth-child(2) nav:nth-child(3) {
  color: rgb(209, 24, 24);
  font-size: 0.08rem;
  width: 100%;
  line-height: 0.2rem;
  display: flex;
  flex-wrap: wrap;
}
.centent-centent1 span:nth-child(2) nav:nth-child(3) p {
  width: 0.3rem;
  text-align: center;
  height: 0.2rem;
  background: rgba(241, 160, 160, 0.733);
  margin-right: 0.05rem;
}
.centent-centent1 span:nth-child(3) {
  height: 100%;
  font-size: 0.16rem;
  font-weight: bold;
  margin-top: .6rem;
}
.icon-dewu {
  font-size: 0.14rem;
  font-weight: bold;
}
.centent-nav {
  height: 0.3rem;
  line-height: 0.3rem;
  margin-top: 0.6rem;
  width: 95%;
  display: flex;
  margin-left: .15rem;
}
.centent-nav div:nth-child(2) {
  font-size: 0.08rem;
  font-weight: 100;
  color: rgb(182, 181, 181);
}
.centent-nav2 {
  height: 0.3rem;
  line-height: 0.3rem;
  width: 100%;
}
.centent-nav div {
  font-size: 0.14rem;
  font-weight: bold;
  width: 90%;
  margin: auto;
  display: flex;
  justify-content: space-around;
}
.centent {
  width: 100%;
}
.goshopping {
  display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: scroll;
    width: 100%;
    position: relative;
}
.context-top {
  width: 100%;
  margin: auto;
  height: 0.6rem;
  line-height: 0.6rem;
  display: flex;
  position: fixed;
  top: 0rem;
  right: 0rem;
  left: 0rem;
 z-index: 9999;
  background: white;
  font-size: 0.18rem;
}
.context-top span:nth-child(2) {
  margin-left: 0.1rem;
}
.icon-zuojiantou {
  font-weight: bolder;
  margin-left: .1rem;
}
</style>